<template>
  <div class="user-container">
    <van-cell is-link class="top-bar">
      <template #title>
        <div class="info">
          <img
            v-if="storeUser && storeUser.avatar"
            :src="storeUser && storeUser.avatar"
            :alt="storeUser && storeUser.username"
            class="avatar"
          />
          <div v-else class="avatar">{{ firstWord }}</div>
          <div class="detail">
            <p class="name">{{ storeUser && storeUser.username }}</p>
            <p class="gary" v-if="hiddeEmail">{{ hiddeEmail }}</p>
            <p class="gary" v-if="hiddePhone">{{ hiddePhone }}</p>
          </div>
        </div>
      </template>
    </van-cell>
    <nuxt-link class="van-cell" :to="{ name: 'user-address' }">
      <van-cell>
        地址
      </van-cell>
    </nuxt-link>
    <nuxt-link class="van-cell" :to="{ name: 'order' }">
      <van-cell>
        订单
      </van-cell>
    </nuxt-link>
    <nuxt-link class="van-cell" :to="{ name: 'user-like' }">
      <van-cell>
        收藏
      </van-cell>
    </nuxt-link>
    <nuxt-link class="van-cell" :to="{ name: 'user-comment' }">
      <van-cell>
        评价
      </van-cell>
    </nuxt-link>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  async asyncData() {},
  middleware: "authenticated",
  computed: {
    ...mapGetters(["storeUser"]),
    // 用户第一个字母
    firstWord() {
      return this.storeUser && this.storeUser.username.slice(0, 1);
    },
    // 隐藏邮箱
    hiddeEmail() {
      if (!this.storeUser || !this.storeUser.email) {
        return false;
      }
      let lastIndex = this.storeUser.email.lastIndexOf("@");
      return (
        this.storeUser.email.slice(0, 3) +
        "*****" +
        this.storeUser.email.slice(lastIndex)
      );
    },
    // 隐藏手机号
    hiddePhone() {
      if (!this.storeUser || !this.storeUser.phone) {
        return false;
      }
      return (
        this.storeUser.phone.slice(0, 3) +
        "*****" +
        this.storeUser.phone.slice(-3)
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.top-bar {
  align-items: center;
}
.info {
  display: flex;
  p {
    margin: 0 0 5px;
    line-height: 1.2;
  }
}
.avatar {
  width: 100px;
  display: block;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #e9e9e9;
  color: #000;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 10px;
}
a.van-cell {
  padding: 0;
}
</style>
